<template>
  <div>
    <!-- 如果不是独自页面则让页面嵌套在菜单下 -->
    <template v-if="!isOneself">
      <!-- 左侧菜单 -->
      <ElMenu class="left-menu-main" />
      <!-- 右侧操作区域 -->
      <div class="right-view-main">
        <!-- 头部面包屑 -->
        <HeaderNav class="header" />
        <!-- 内容展示区 -->
        <AppContent class="content" />
      </div>
    </template>

    <!-- 如果是独自打开页面，则只展示纯页面 -->
    <div v-else>
      <AppContent />
    </div>
  </div>
</template>

<script>
import AppContent from "./components/AppContent.vue";
import ElMenu from "./components/ElMenu/index.vue";
import HeaderNav from "./components/HeaderNav.vue";
export default {
  components: {
    AppContent,
    ElMenu,
    HeaderNav,
  },
  data() {
    return {
      isOneself: false,
    };
  },
  mounted() {
    // 获取当前路由是否是独自打开的
    this.isOneself = this.$route.meta.oneself;
  },
  watch: {
    // 监听路由变化，实时获取路由信息
    $route: function (newVal) {
      this.isOneself = newVal.meta.oneself;
    },
  },
};
</script>

<style lang="less" scoped>
.left-menu-main {
  transition: width 0.28s;
  width: 210px !important;
  background-color: #304156;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  overflow: auto;
}

.header {
  position: fixed;
  height: 50px;
  width: calc(100vw - 210px);
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding-left: 15px;
  box-sizing: border-box;
}
.content {
  position: fixed;
  overflow: auto;
  height: calc(100vh - 50px);
  width: calc(100vw - 210px);
  bottom: 0;
  right: 0;
}
</style>